<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no"
		/>
		<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="./js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link href="./css/bootstrap.min.css" />
		<style></style>
		<title>ros</title>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-1"></div>
				<div class="col-4">
					<div class="row m-2">
						<h4 class="m-auto">控制区</h4>
					</div>
					<div class="row m-2">
						<h5 class="m-auto">
							nodejs服务器连接状态：<span id="con_status"
								>断开</span
							>
						</h5>
					</div>
					<div class="row">
						<div class="col-auto">
							<div class="form-group">
								<label for="exampleFormControlSelect1"
									>物品</label
								>
								<select class="form-control" id="goods">
									<option value="" selected>请选择...</option>
									<option value="1">物品一</option>
									<option value="2">物品二</option>
									<option value="3">物品三</option>
								</select>
							</div>
						</div>
						<div class="col-auto">
							<div class="form-group">
								<label for="exampleFormControlSelect1"
									>目的地点</label
								>
								<select class="form-control" id="destination">
									<option value="" selected>请选择...</option>
									<option value="1">地点一</option>
									<option value="2">地点二</option>
									<option value="3">地点三</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-auto">
							<button
								type="button"
								class="btn btn-info mt-4"
								onclick="sendcmd('运送')"
							>
								运送
							</button>
						</div>
						<!-- <div class="col-auto">
							<button type="button" class="btn btn-info mt-4">
								运送
							</button>
						</div>
						<div class="col-auto">
							<button type="button" class="btn btn-info mt-4">
								运送
							</button>
						</div>
						<div class="col-auto">
							<button type="button" class="btn btn-info mt-4">
								运送
							</button>
						</div> -->
						<div class="col-auto">
							<button
								type="button"
								class="btn btn-danger mt-4"
								onclick="sendcmd('终止')"
							>
								终止
							</button>
						</div>
						<hr />
					</div>
					<div class="row mt-4 mb-2">
						<h4 class="m-auto">操作记录</h4>
					</div>
					<div class="row" id="msg_board">
						<div class="alert alert-info btn-block" role="alert">
							指令：将 “物品一” 送到 “地点一” 18:20
						</div>
						<div class="alert alert-danger btn-block" role="alert">
							小车被终止 18:46
						</div>
						<div class="alert alert-info btn-block" role="alert">
							指令：将 “物品一” 送到 “地点一” 18:20
						</div>
						<div class="alert alert-info btn-block" role="alert">
							指令：将 “物品一” 送到 “地点一” 18:20
						</div>
					</div>
				</div>

				<div class="col-6" id="map_title">
					<div class="row m-2">
						<h4 class="m-auto">实时位置</h4>
					</div>
					<div class="row">
						<canvas
							id="canvas"
							width="700"
							height="700"
							class="border"
						></canvas>
					</div>
				</div>
				<div class="col-1"></div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var good_position = {
		'1': { y: 3, x: 3.2 },
		'2': { y: 2, x: 7 },
		'3': { y: -1, x: 8.5 },
	};
	// var ip = '106.13.162.250';
	var ip = '119.3.151.139';
	// var ip = '192.168.0.104';
	var port = '8004';
	var ws = new WebSocket('ws://' + ip + ':' + port + '/echo');
	var c = document.getElementById('canvas');
	var cxt = c.getContext('2d');
	cxt.fillStyle="#ff0000";
	var img = new Image();
	img.src = 'map.jpg';
	var msg_cnt = 4;
	var one_block_x=0,//canvas x ros y
	one_block_y=0;//canvas y ros x
	window.onload = () => {
		c.height = $('#map_title').css('width').replace('px', '');
		one_block_x = c.height/12;
		one_block_y = c.height/17;
		c.width = c.height;
		cxt.drawImage(img, 0, 0, c.width, c.height);
		cxt.fillStyle="#ff0000";
		cxt.beginPath();
		cxt.arc(canvas_x_ros_y(0), canvas_y_ros_x(-6), 15, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
		// 内存中先加载，然后当内存加载完毕时，再把内存中的数据填充到我们的 dom元素中，这样能够快速的去
		// 反应，比如网易的图片
	};
	/*
	* ros的y要放在canvas的x位置哦
	{"data":{"x":-3,"y":0},"type":200}
	*/
	canvas_x_ros_y=(x)=>{//
		return one_block_x*(7-x);
	}
	canvas_y_ros_x=(y)=>{
		return one_block_y*(10-y);
	}
	ws.onopen = function (e) {
		$('#con_status').html('已连接');
	};
	ws.onclose = function (e) {
		$('#con_status').html('断开');
	};
	ws.onerror = function () {
		$('#con_status').html('断开');
	};
	ws.onmessage = function (evt) {
		received_msg = JSON.parse(evt.data);
		console.log(received_msg);
		if (received_msg['type'] == 200) {
			ws.send(JSON.stringify({ type: 1, data: {} }));
			c.width = c.height;
			cxt.drawImage(img, 0, 0, c.width, c.height);
			cxt.beginPath();
			cxt.fillStyle="#ff0000";
			cxt.arc(
				canvas_x_ros_y(received_msg['data']['y']),
				canvas_y_ros_x(received_msg['data']['x']),
				15,
				0,
				Math.PI * 2,
				true
			);
			cxt.closePath();
			cxt.fill();
		} else if (received_msg['type'] == 201) {
			msg_cnt++;
			if (msg_cnt > 8) $('#msg_board').children().last().remove();
			let html =
				'<div class="alert alert-info btn-block" role="alert">' +
				received_msg['data'] +
				'</div>';
			$('#msg_board').html(html + $('#msg_board').html());
		}
	};
	sendcmd = (e) => {
		if (e == '运送') {
			if ($('#goods').val() == '') {
				alert('请选择物品');
			} else if ($('#destination').val() == '') {
				alert('请选择目的地');
			} else {
				let obj = {
					type: 100,
					data: {
						goods: $('#goods').val(),
						x: good_position[$('#destination').val()].x,
						y: good_position[$('#destination').val()].y,
					},
				};
				ws.send(JSON.stringify(obj));
			}
		} else if (e == '终止') {
			if (confirm('确定终止小车？')) {
				let obj = {
					type: 101,
					data: {},
				};
				ws.send(JSON.stringify(obj));
			}
		}
	};
</script>
